<template>
  <div class="awards-form">
    <div class="form-header">
      <h3>获奖经历</h3>
      <el-button type="primary" @click="addAward">添加获奖经历</el-button>
    </div>

    <el-empty v-if="awards.length === 0" description="暂无获奖经历" />

    <el-table :data="awards" stripe>
      <el-table-column prop="name" label="奖项名称" width="180">
        <template #default="{ row, $index }">
          <el-input v-model="row.name" placeholder="奖项名称" />
        </template>
      </el-table-column>
      <el-table-column prop="issuingOrg" label="颁发机构" width="180">
        <template #default="{ row }">
          <el-input v-model="row.issuingOrg" placeholder="颁发机构" />
        </template>
      </el-table-column>
      <el-table-column prop="date" label="获奖时间">
        <template #default="{ row }">
          <el-date-picker
              v-model="row.date"
              type="month"
              placeholder="选择月份"
              value-format="YYYY-MM"
          />
        </template>
      </el-table-column>
      <el-table-column prop="description" label="奖项描述">
        <template #default="{ row }">
          <el-input v-model="row.description" placeholder="奖项描述" />
        </template>
      </el-table-column>
      <el-table-column label="证明文件" width="150">
        <template #default="{ row }">
          <el-upload
              action="/api/upload"
              :show-file-list="false"
              :on-success="(res) => row.certificate = res.url"
          >
            <el-button type="primary" size="small">上传</el-button>
          </el-upload>
          <el-link
              v-if="row.certificate"
              :href="row.certificate"
              target="_blank"
              type="primary"
          >
            查看
          </el-link>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="80">
        <template #default="{ $index }">
          <el-button
              type="danger"
              size="small"
              @click="removeAward($index)"
          >
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script setup lang="ts">
const props = defineProps<{
  awards: any[]
}>()

const emit = defineEmits(['update:awards'])

// 添加获奖经历
const addAward = () => {
  const newAward = {
    name: '',
    issuingOrg: '',
    date: '',
    description: '',
    certificate: ''
  }
  emit('update:awards', [...props.awards, newAward])
}

// 删除获奖经历
const removeAward = (index: number) => {
  const newAwards = [...props.awards]
  newAwards.splice(index, 1)
  emit('update:awards', newAwards)
}
</script>

<style scoped>
.awards-form {
  padding: 0 20px;
}

.form-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}
</style>